<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="../js/jquery-1.10.0.js"></script>
</head>
<style type="text/css">
#border
{
	line-height:30px;
	border-radius:10px;
	-webkit-border-radius:10px;
	width:500px;
	height:30px;
	border:2px solid black;
	overflow:hidden;
	position:relative;
	text-align:center;
}
#runner
{
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:0%;
	background:#0CF;
}
#text
{
	position:relative;
	z-index:100;
	font-size:18px;
	font-weight:bold;
}
</style>
<body>
<center>
<form action="" method="post" enctype="multipart/form-data" id="form">
<label for="fileName">Browse</label>
<input type="file" name="fileName" id="fileName" size="40" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onchange="fileInfo()" />
<input type="button" value="UPLOAD" onclick="upload()" id="submit"/><input style="display:none" type="button" value="Cancel" onclick="cancelUpload()" id="cancel"/>
<p id="status" style='padding:0px;margin:0px;color:blue;font-weight:bold'>&nbsp;</p>
<br />
<br />
<p id="fileerror" style='padding:0px;margin:0px;color:red;font-weight:bold'>&nbsp;</p>
<br />
<br />
<div id="border">
	<div id="runner">
    </div>
    <div id="text">
    </div>
</div>
<br />
<br />
<input type="button" value="IMPORT" id="import"/>
<img src="" />
</form>
<br /><a href="template/result.xlsx" target="_blank">Download File Excel Mẫu</a>
<br />
<br />
<div id="result">
</div>
</center>
<script>
$(document).ready(function(e) {
	$("#fileName").change(function(){
		var fileName=$("#fileName").val();
		var temp= fileName.split(".");
		var extension = temp[temp.length-1];
		if(extension!="xlsx")
		{
			$("#fileerror").html("XLSX FILE ONLY");
			$("#submit").attr("disabled","disabled");
		}
		else
		{
			$("#fileerror").html("&nbsp;");
			$("#submit").removeAttr("disabled");
		}
	});
	$("#import").click(function(){
		document.getElementById("runner").style.width="0%";
		document.getElementById("text").innerHTML="0%";
		$("img").attr("src","../image/source/loader.gif");
		$.ajax({
			url:"importProcess.php",
			data:{type:"result",path:$("#path").val()}
		}).done(function(msg){
			$("#result").html(msg);
			$("img").attr("src","");
		});
	});
});
</script>
<script language="javascript">
var path=null;
var request;
function fileInfo()
{
	var file = document.getElementById("fileName").files[0];
	if(file)
	{
		var fileSize = file.size;
		var fileName=file.name;
		var fileType=file.type;
		document.getElementById("status").innerHTML="File Name : " + fileName + "<br>File Size : " + fileSize + "</br>File Type : " +fileType; 
	}
}
function upload()
{
	document.getElementById("cancel").style.display="";
	document.getElementById("submit").setAttribute("disabled","disabled");
	var fd = new FormData();
    fd.append("fileName", document.getElementById('fileName').files[0]);
	request = new XMLHttpRequest();
	request.upload.addEventListener("progress",onProgress,false);
	request.addEventListener("load",onLoad,false);
	request.addEventListener("error",onError,false);
	request.addEventListener("abort",onAbort,false);
	request.open("POST","uploadfile_Status.php?type=result");
	request.send(fd);
}
function onProgress(e)
{
	document.getElementById("runner").style.width=Math.round((parseFloat(e.loaded)/parseFloat(e.total))*100)+"%";
	document.getElementById("text").innerHTML=Math.round((parseFloat(e.loaded)/parseFloat(e.total))*100)+"%";
}
function onLoad(e)
{
	var strtemp = e.target.responseText;
	if(strtemp.substr(0,4)=="Done")
	{
		document.getElementById("runner").style.width="100%";
		document.getElementById("text").innerHTML="100%";
		if(path)
		{
			document.getElementsByTagName("form").item(0).removeChild(path);
		}
		path = document.createElement("input");
		path.setAttribute("type","hidden");
		strtemp = strtemp.substr(4,strtemp.length);
		path.setAttribute("value",strtemp);
		path.setAttribute("id","path");
		document.getElementsByTagName("form").item(0).appendChild(path);
	}
	else alert(strtemp);
	document.getElementById("submit").removeAttribute("disabled");
	document.getElementById("cancel").style.display="none";
}
function onError(e)
{
	alert("Error");
	document.getElementById("submit").removeAttribute("disabled");
	document.getElementById("cancel").style.display="none";
}
function onAbort(e)
{
	alert("Aborted");
	document.getElementById("submit").removeAttribute("disabled");
	document.getElementById("cancel").style.display="none";
}
function cancelUpload()
{
	request.abort();
	document.getElementById("submit").removeAttribute("disabled");
	document.getElementById("cancel").style.display="none";
}
</script>
</body>
</html>